<route lang="json5">
{
  style: {
    // navigationStyle: 'custom',
    navigationBarTitleText: '匹配产品',
  },
}
</route>
<template>
  <view
    class="overflow-hidden position-relative"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="matchUser-bg">
      <!-- <image src="/static/images/matchUser/bg.png" alt="" class="block cjy-w100 matchUser-bg" /> -->
      <view class="text-wrapper">
        <text class="title">智能匹配</text>
        <view class="d-flex">
          <view class="d-flex align-items-center">
            <image src="/static/images/matchUser/icon1.png" alt="" class="block text-icon" />
            <text class="sub-title ml-1">全面产品目录</text>
          </view>
          <view class="d-flex align-items-center ml-2">
            <image src="/static/images/matchUser/icon2.png" alt="" class="block text-icon" />
            <text class="sub-title ml-1">数据加密保护</text>
          </view>
          <view class="d-flex align-items-center ml-2">
            <image src="/static/images/matchUser/icon3.png" alt="" class="block text-icon" />
            <text class="sub-title ml-1">快速匹配产品</text>
          </view>
        </view>
      </view>
      <view class="panel-wrapper matchUser-panel">
        <text class="panel-title">选择您的匹配项目</text>
        <van-row :gutter="[11, 13]">
          <van-col span="8">
            <Item
              title="工薪"
              bgColor="#EDF4FF"
              bgImg="url(static/images/matchUser/bg1.png)"
              btnColor="#165DFF"
            />
          </van-col>
          <van-col span="8">
            <Item
              title="企业"
              bgColor="#FFF9E6"
              bgImg="url(static/images/matchUser/bg2.png)"
              btnColor="#CC9213"
            />
          </van-col>
          <van-col span="8">
            <Item
              title="抵押"
              bgColor="#E0FFFC"
              bgImg="url(static/images/matchUser/bg3.png)"
              btnColor="#52A393"
            />
          </van-col>
        </van-row>
      </view>
    </view>
    <view class="mt-3 mx-3 tabs-box">
      <van-tabs
        background="transparent"
        titleActiveColor="#165DFF"
        titleInactiveColor="#1D2129"
        v-model:active="tabActive"
        @click-tab="onClickTab"
        offset-top="100"
      >
        <van-tab title="全部客户(0)">
          <MatchList :datas="datas1" />
        </van-tab>
        <van-tab title="工薪(0)">rr</van-tab>
        <van-tab title="企业(0)">rr</van-tab>
        <van-tab title="抵押(0)">rr</van-tab>
      </van-tabs>
    </view>
  </view>
  <BottomBar />
</template>

<script lang="ts" setup>
import Item from './components/item.vue'
import MatchList from './components/matchList.vue'
import BottomBar from './components/bottomBar.vue'

defineOptions({
  name: 'matchUser',
})

const datas1 = [
  {
    type: '工薪',
    name: '王军',
    count: '12',
    time: '2024-03-12',
    isOk: true,
  },
  {
    type: '工薪',
    name: '北京管理咨询有限公司房山分公司',
    count: '12',
    time: '2024-06-12',
    isOk: true,
  },
  {
    type: '企业',
    name: '湖南长沙青山有限公司',
    count: '12',
    time: '2024-05-12',
    isOk: true,
  },
]

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const tabActive = ref(0)

onLoad(() => {
  // console.log(author)
})

const onClickTab = () => {}
</script>

<style>
.matchUser-bg {
  box-sizing: border-box;
  /* height: 338px; */
  padding-top: 110px;
  background:
    url(static/images/matchUser/banner.png) no-repeat left top / auto 338px,
    linear-gradient(183deg, #2e66de 0%, rgba(46, 102, 222, 0.8) 26%, rgba(46, 102, 222, 0) 100%);
  /* background-size: auto 338px; */
  .text-wrapper {
    padding-left: 27px;
    .title {
      font-size: 26px;
      font-weight: bold;
      line-height: 30px;
      color: #ffffff;
    }
    .sub-title {
      padding: 10px 0;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      color: #ffffff;
    }
    .text-icon {
      width: 12px;
      height: 12px;
    }
  }
}
.matchUser-panel {
  padding: 10px 12px 20px 12px;
  margin-top: 20px;
  .panel-title {
    box-sizing: border-box;
    display: inline-block;
    margin: 0 0 12px 0;
    font-family: 'Alibaba PuHuiTi, Alibaba PuHuiT' i;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #4080ff;
  }
}
.tabs-box {
  .van-tab--line {
    border-bottom: 1px solid #e7e7e7;
  }
  .van-tabs--line .van-tabs__wrap {
    height: 48px;
  }
}
</style>
